<section class="hero is-fullheight portal-hud">
  <div class="container">
  	<header class="hero-header">
  	  {% shape "menu", alias: "alias:main-menu" %}
    </header>
    <div class="hero-body justify-content-center">
      <i class="icon {{ Model.ContentItem.Content.Hero.Icon.Text }}"></i>
      <h1>{{ Model.ContentItem.Content.Hero.Title.Text }}</h1>
      <p class="h3 m-2">{{  Model.ContentItem.Content.Hero.Subtitle.Text }}</p>
      <nav class="navbar navbar-expand-lg align-self-center mt-3" role="navigation">
        {% if User.Identity.IsAuthenticated and Model.ContentItem | user_can_view %}
          <ul id="hero-highlights" class="navbar-nav"></ul>
        {% else %}
          {% unless User.Identity.IsAuthenticated %}
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="btn btn-lg btn-primary is-rounded" href="{{ '~/login' | return_url }}" class="btn btn-lg btn-primary is-rounded nav-link mt-5">{{ "Log in" | t }}</a>
              </li>
            </ul>
          {% endunless %}
        {% endif %}
      </nav>
      <div role="i" class="d-block d-md-none h2 mt-4" aria-label="{{ 'Down arrow' | t }}">
        <svg id="down-arrow" height="32" viewBox="0 0 551.13 551.13" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m275.565 361.679-223.897-223.896h-51.668l275.565 275.565 275.565-275.565h-51.668z"/></svg>
      </div>
    </div>
    <footer class="hero-footer dark fip">
      {{ "SymbolStatisticsCanada" | shape_new | shape_render }}
      <div class="fip-spacer"></div>
      {{ "SymbolCanada" | shape_new | shape_render }}
    </footer> 
  </div>
</section>